
<script src="__PUBLIC__/vendors/FusionCharts/js/fusioncharts.js" type="text/javascript"></script>
<script src="__PUBLIC__/vendors/FusionCharts/js/fusioncharts.charts.js" type="text/javascript"></script>
<style>
    p{margin: 0}
    .num-nav{font-size: 30px; height: 50px;width: 120px;}
    .num-nav span{font-size: 14px}
    .userinfo{height: 30px; font-size: 18px; background-color: #9FAFD1; color: #ffffff;margin-bottom: 20px}
    .user-menu{width: 120px; height: 60px; background-color: #00b7ee;color: #ffffff; border: 1px; border-radius: 5px;}
    .addgood{ height: 30px;font-size: 18px;}
    .addgood label{font-size: 20px;}
    .orderinfo{height: 30px; font-size: 18px; background-color: #9FAFD1; color: #ffffff;margin-bottom: 20px}
    .order-menu{width: 120px; height: 60px; background-color: #00b7ee;color: #ffffff; border: 1px; border-radius: 5px;text-align: center}
    .show_price{width:14.2%!important;}
</style>
<div class="order row">
    <div class="row col-xs-6" style="margin-right: 5px;">
        <div class="col-xs-12 orderinfo">订单</div>
        <div class="row">
            <div class="col-xs-2">
                <div class="order-menu"><p>总订单数</p><p class="num-nav">{$all_order}<span>单</span></p></div>
            </div>
            <div class="col-xs-2">
                <div class="order-menu"><p>未支付订单</p><p class="num-nav">{$order0}<span>单</span></p></div>
            </div>
            <div class="col-xs-2">
                <div class="order-menu"><p>未发货订单</p><p class="num-nav">{$order1}<span>单</span></p></div>
            </div>
            <div class="col-xs-2">
                <div class="order-menu"><p>未收获订单</p><p class="num-nav">{$order2}<span>单</span></p></div>
            </div>
            <div class="col-xs-2">
                <div class="order-menu"><p>已完成订单</p><p class="num-nav">{$order3}<span>单</span></p></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12" id="activestatusall"></div>
        </div>
    </div>
    <div class="row col-xs-6">
        <div class="col-xs-12 orderinfo">会员</div>
        <div class="row">
            <div class="col-xs-3">
                <div class="order-menu"><p>总会员数</p><p class="num-nav">{$user_total}<span>人</span></p></div>
            </div>
            <div class="col-xs-3">
                <div class="order-menu"><p>游客</p><p class="num-nav">{$user_check}<span>人</span></p></div>
            </div>
            <div class="col-xs-3">
                <div class="order-menu"><p>会员</p><p class="num-nav">{$user_num}<span>人</span></p></div>
            </div>
            <div class="col-xs-3">
                <div class="order-menu"><p>黑名单</p><p class="num-nav">{$user_black}<span>人</span></p></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12" id="userstatus"></div>
        </div>
    </div>
</div>
<script>
    FusionCharts.ready(function(){
        var activeStatusChart = new FusionCharts({
            type: 'pie2d',
            renderAt: 'activestatusall',
            width: '100%',
            height: '400',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "订单概况",
                    "subCaption": "",
                    "paletteColors": "#F54B28,#1aaf5d,#055EBA,#D331BC",
                    "bgColor": "#ffffff",
                    "showBorder": "0",
                    "use3DLighting": "0",
                    "showShadow": "0",
                    "enableSmartLabels": "0",
                    "startingAngle": "0",
                    "showPercentValues": "1",
                    "showPercentInTooltip": "0",
                    "decimals": "1",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "toolTipColor": "#ffffff",
                    "toolTipBorderThickness": "0",
                    "toolTipBgColor": "#000000",
                    "toolTipBgAlpha": "80",
                    "toolTipBorderRadius": "2",
                    "toolTipPadding": "5",
                    "showHoverEffect":"1",
                    "showLegend": "1",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": '0',
                    "legendShadow": '0',
                    "legendItemFontSize": '10',
                    "legendItemFontColor": '#666666'
                },
                "data": {$alldata2}
            }
        }).render();
        var activeStatusChart = new FusionCharts({
            type: 'pie2d',
            renderAt: 'userstatus',
            width: '100%',
            height: '400',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "会员概况",
                    "subCaption": "",
                    "paletteColors": "#F54B28,#1aaf5d,#055EBA,#D331BC",
                    "bgColor": "#ffffff",
                    "showBorder": "0",
                    "use3DLighting": "0",
                    "showShadow": "0",
                    "enableSmartLabels": "0",
                    "startingAngle": "0",
                    "showPercentValues": "1",
                    "showPercentInTooltip": "0",
                    "decimals": "1",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "toolTipColor": "#ffffff",
                    "toolTipBorderThickness": "0",
                    "toolTipBgColor": "#000000",
                    "toolTipBgAlpha": "80",
                    "toolTipBorderRadius": "2",
                    "toolTipPadding": "5",
                    "showHoverEffect":"1",
                    "showLegend": "1",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": '0',
                    "legendShadow": '0',
                    "legendItemFontSize": '10',
                    "legendItemFontColor": '#666666'
                },
                "data": {$alldata3}
            }
        }).render();

    });
</script>